<template>
  <div class="question_box">
    <div class="empty" v-if="questions.length===0?111:''">
        <i class="iconfont">&#xe630;</i>
        <p>您还没有问题需要提问</p>
      </div>    
    <div class="article_list" v-for="item in questions">
        <p>来自:{{item.questionLabel}}</p>
        <div class="clearfloat">
              <div class="head_img fl">
                  <img v-bind:src="'/api/header/'+item.userId.headerImg" alt="" v-if="item.userId.headerImg">
                  <i class="iconfont" v-else>&#xe638;</i>
              </div>
              <div class="content fl">
                  <div class="one">
                      <router-link tag="a"  class="username bule" to="">{{item.userId.username}}</router-link>
                      <span class="time">{{item.createdAt|filterDate}}</span>
                  </div>                    
              </div>
              <div class="del fr iconfont" v-bind:questionId = "item._id" @click="delQuestionFun">&#xe632;</div>
        </div>
        <router-link tag="a" v-bind:to="'/question/questionDetail/'+item._id">
            <h4 class="title">{{item.questionTitle}}</h4>
        </router-link>
        <div class="operation">
              <span class="like">
                <i class="iconfont">&#xe707;</i>
                <span>{{item.giveLikes.length}}</span>
              </span>
              <span class=" collection">
                  <i class="iconfont">&#xe6ea;</i>
                  <span>{{item.collections.length}}</span>
              </span>
              <span class="comment">
                  <i class=" iconfont">&#xe70c;</i>
                      <span>{{item.commentContents.length}}</span>
              </span>
        </div>  
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import dataformat from "../../assets/js/dateformat.js"
    export default{
      data(){
          return {
              questions:[]
          }
      },
      created:function(){
          this.getQusetionList();
      },
      methods:{
          delQuestionFun:function(e){
              var questionId = e.target.getAttribute('questionId');
              var that = this;
               var r=confirm("您确定要删除这条问题吗？");
               if(true){
                   axios.get('/api/personal/delQuestion',{
                    params:{
                        id:questionId,
                        userId:that.$store.state.userId
                    }
                }).then(function(res){
                    if(res.data.ok===1){
                         that.getQusetionList();
                    }
                })
               }             
          },
          getQusetionList:function(){
              var that = this;
                axios.get('/api/personal/getQuestionLists',{
                    params:{
                        userId:that.$store.state.userId
                    }
                }).then(function(docs){
                    that.questions = docs.data;
                })
          }
      },
      filters:{
        filterDate:dataformat,
      }
    }
</script>
<style lang='scss' scoped>
.del{
    color:#dddddd;
    font-size:18px;
    margin-right:20px;
}
.empty{
  height:300px;
  text-align: center;
  padding-top:80px;
  i{
    font-size:56px;
    color:#e4e4e4;
  }
  p{
    color:#c8c9ca;
    margin-top:12px;
  }
}
.question_box{
  padding:30px;
}
.article_list{
    border-bottom:1px solid #f0f0f0;
    padding-bottom:30px;
    >p{
        font-size:14px;
        color:#c8c9ca;
        padding-bottom:16px;
        margin-top:30px;
    }
    .head_img{
        width:30px;
        height:30px;
        line-height: 30px;
        text-align: center;
        margin-right:12px;
        border-radius: 50%;
        background: #e2e2e2;
        overflow: hidden;
        img{
            min-width: 30px;
            min-height: 30px;
            max-width:40px;
            max-height:40px;
        }
        i{
            color:#fff;
            font-size:12px;
        }
    }
    .content{
        .one{
            color:#c8c9ca;
            font-size:14px;
            line-height:30px;
            .username:after{
                content:'';
                display: inline-block;
                width:3px;
                height:3px;
                border-radius: 50%;
                margin: 4px 12px;
                background: #9c9c9d;
            }
            .label{
                padding:4px 18px;
                border-radius: 2px;
                color:#43a1f8;
                margin-left:16px;
                background: #d5edff;
            }
        }
        .reader::before{
            content: '';
            display: inline-block;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            margin: 4px 12px;
            background: #9c9c9d
        }
        
        .introduction{
            margin-top:10px;
            color:#78787d;
            p{
                line-height: 30px;
            }
        }
        
    }
    h4{
        font-size:18px;
        margin-top:14px;
        color:#78787d;
      }
    .operation{
        margin-top:20px;
        color:#c8c9ca;
        >span{
            position: relative;
            display: inline-block;
            z-index: 10000;
            margin-right:30px;
        }
        .comment{
            border-right:none;
            i{
                font-size:14px;
            }
        }
        span{
            font-size: 14px;
            i{
                font-style:normal;
                font-size:18px;
                padding-right:10px;
            }
            span{
                display: inline-block;
                line-height:24px;
            }
        }
    }
}
</style>
